<template>
  <div>
    <h1>基础表格</h1>

    <div style="display: flex; width: 60%">
      <el-button @click="clear">清空选中</el-button>
      <el-button @click="reset">重置</el-button>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="input"
        placeholder="请输入内容"
        @input="search"
      ></el-input>
    </div>
    <el-table
      ref="multipleTable"
      :data="reslist"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="uid" label="id" width="120"> </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <el-image
            style="width: 80px; height: 80px"
            :src="scope.row.avatar"
            :preview-src-list="srcList"
            @click="getBigImg(scope.row.avatar)"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="adress" label="地址" show-overflow-tooltip>
      </el-table-column>

      <el-table-column label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button @click="edit(scope.row)">编辑</el-button>
          <el-button @click="remove(scope.row.uid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[1, 2, 3, 4, 5]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="list.length"
    >
    </el-pagination>

    <el-dialog title="编辑信息" :visible.sync="editshow">
      <el-form :model="form">
        <el-form-item label="姓名">
          <el-input v-model="form.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="form.adress" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editshow = false">取 消</el-button>
        <el-button type="primary" @click="editshow = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      copylist: [],
      srcList: [],
      pagenum: 1,
      pagesize: 5,
      options: [
        {
          value: "山东省",
          label: "山东省",
        },
        {
          value: "河南省",
          label: "河南省",
        },
        {
          value: "四川省",
          label: "四川省",
        },
      ],
      value: "",
      //搜索中选中的省份
      input: "",
      //按照姓名关键字搜索
      editshow: false,
      form: {
        nickname: "",
        adress: "",
      },
      //编辑弹窗里展示的内容

      removeids: [],
    };
  },
  mounted() {
    this.getlist();
  },
  computed: {
    reslist() {
      return this.list.slice(
        this.pagesize * (this.pagenum - 1),
        this.pagesize * this.pagenum
      );
    },
    //json数据的分页需要自己用计算属性实现
  },
  methods: {
    getlist() {
      this.$axios.get("/list.json").then((res) => {
        this.list = res.data.concat([]);
        this.copylist = res.data.concat([]);
      });
    },
    getBigImg(img) {
      this.srcList = [];
      this.srcList.push(img);
    },
    //点击看大图

    handleCurrentChange(val) {
      this.pagenum = val;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },

    search() {
      this.list = this.copylist.filter((item) => {
        return (
          item.adress.includes(this.value) && item.nickname.includes(this.input)
        );
      });
    },

    edit(row) {
      this.editshow = true;
      this.form = row;
    },

    handleSelectionChange(sel) {
      console.log(sel);
      this.removeids = sel.map((item) => {
        return item.uid;
      });
    },
    clear() {
      this.$confirm("是否删除选中的名单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.list = this.list.filter((item) => {
            if (this.removeids.indexOf(item.uid) == -1) {
              return item;
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reset() {
      this.list = this.copylist;
    },
    remove(id) {
      this.list.forEach((item, index) => {
        if (item.uid == id) {
          this.list.splice(index, 1);
        }
      });
    },
  },
};
</script>
